簡言

Calc 是計算機英文單字「calculator」的縮寫，這個由微軟提出的 CSS 方法，真的是網頁開發的一大福音啊！我們竟然可以在網頁中直接做計算！？這真是太猛啦，從此我們再也不用在那邊絞盡腦汁的計算數學，或是想辦法用 JavaScript 來動態計算，我們可以很輕鬆的利用 calc() 這個「計算機」方法，來將百分比即時且動態的計算出實際要的什麼高度，真可謂劃時代的一個方法啊！但這個方法需要注意的是太過大量的使用的話，網頁效能會是比較差的，所以請審慎使用喔。

原理說明

calc 計算機，是一個可以讓我們動態在網頁中動態計算數值的一種 CSS 屬性『函式』的寫法，經常會用在百分比跟像素的計算，因為百分比是一個不確定的數值，而像素卻又是一個很明確的單位，這時候的計算就導致我們很困擾了，因為我們會需要依據父層的寬度或高度來做動態的計算，在這次的例子中 Amos 就是直接取父層 100% 高，再扣掉字身高度後，將這個數值除以 2 就是我需要的上方空間啦，計算原理很簡單，但是若是沒有 calc 這個特別的『函式』來協助我們的話，我們還真的是很麻煩阿，這時候 Amos 真心覺得應該好好感謝微軟阿。

原始碼

HTML

<div class="box">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！
  </div>
</div>

CSS

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
}
.content{
  width: 400px;
  background: #ccc;
  position: relative;
  top:calc((100% - 70px) / 2);
  margin:auto;
  height: 70px;
}

實際示範頁面

Line搜尋「@csscoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
本文同步發表於 CSS可樂部落格
CSS coke的Youtube直播頻道
歡迎點擊右側訂閱 CSS coke直播頻道
若有任何問題歡迎留言討論喔
謝謝各位